<template>
  <div class="image-body">
    <div class="select-query">
      <el-input
        v-model="blurry"
        placeholder="请输入内容"
        style="width: 100%"
        @input.native="filterSelect"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" />
      </el-input>
    </div>
    <el-scrollbar style="height: 335px;overflow-y: auto">
      <div class="image-item-body">
        <div class="image-item-li">
          <el-upload
            :action="imagesUploadApi"
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
        <div v-if="iconList">
          <div v-for="item in iconList" :key="item.id" class="image-item-li" @click="selectedIcon(item)">
            <div class="image">
              <el-image :src="baseURL+item.url">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
            <div class="image-span">{{ item.name }}</div>
          </div>
        </div>
        <div style="clear: both" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import icons from '@/api/image/image'
import { mapGetters } from 'vuex'
export default {
  name: 'ServerImageSelect',
  props: {
    fallBackFunction: {
      type: String,
      require: true
    }
  },
  computed: {
    ...mapGetters(['imagesUploadApi'])
  },
  created() {
    this.init()
  },
  data() {
    return {
      name: '',
      blurry: '',
      oldList: [],
      iconList: [],
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      )
    }
  },
  methods: {
    init() {
      icons.queryAllImage().then(res => {
        this.iconList = res
        this.oldList = res
      }).catch(error => {
        console.log(error)
      })
    },
    /* filterIcons() {
      if (this.name) {
        const dataList=this.iconList
        this.iconList = dataList.filter(item => item.name.includes(this.name))
      }
    },*/
    selectedIcon(name) {
      this.$emit(this.fallBackFunction, name)
      document.body.click()
    },
    reset() {
      this.name = ''
      this.init()
    },
    filterSelect() {
      if (this.blurry) {
        this.iconList = this.oldList.filter(item => {
          if (item.name.includes(this.blurry)) {
            return item
          }
        })
      } else {
        this.iconList = this.oldList
      }
    },
    handleAvatarSuccess(res, file) {
      this.iconList.push(res)
    },
    handleAvatarError(err, file) {
      this.$message.error(err)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('只能上传png图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传上传图片大小不能超过2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.image-body {
  width: 100%;
  height: 375px;
  overflow: hidden;
}
.image-item-body {
  width: 100%;
  height: auto;
  min-height: 60px;
}

.image-item-li {
  width: 25%;
  height: 70px;
  text-align: center;
  line-height: 70px;
  padding: 5px;
  box-sizing: border-box;
  float: left;
}

.el-image {
  width: 40px;
  height: 40px;
}

.image-span {
  width: 100%;
  height: 20px;
  overflow: hidden;
  line-height: 20px;
  font-size: 12px;
}
.image{
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
